<template>
	<div class="top">
		<h3>基础信息</h3>
		<form class="f_top">
			<el-form-item label="电话" style="width: 400px;">
				<el-input v-model="form.householdPhone" placeholder="请输入住户电话" clearable />
			</el-form-item>
			<el-form-item label="姓名" style="width: 400px;">
				<el-input v-model="form.householdName" placeholder="输入住户姓名" />
			</el-form-item>
			<el-form-item label="住户生日" style="width: 800px;">
				<el-form-item>
					<el-col :span="11" style="width: 525px;line-height: 40px;">
						<el-date-picker v-model="form.birthday" type="date" placeholder="选择住户生日" style="width: 100%;height: 40px;" />
					</el-col>
				</el-form-item>
			</el-form-item>
			<el-form-item label="住户标签" style="width: 800px;">
				<el-select v-model="form.identityLabel" placeholder="请选择住户标签" style="width: 240px; line-height: 40px;">
					<el-option label="大傻春" value="大傻春"></el-option>
					<el-option label="大傻伟" value="大傻伟"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="备注(选填)" style="width: 400px;">
				<el-input type="textarea" placeholder="备注" />
			</el-form-item>
		</form>
	</div>

	<div class="button">
		<h3>房屋绑定信息</h3>
		<form class="f_button">
			<el-form-item label="所属房屋" class="xz" style="width: 800px;">
				<el-select v-model="form2.husId" placeholder="请选择" style="width: 200px; right: 5px;">
				        <el-option
				          v-for="house in data.house"
				          :key="house.houseId"
				          :label="house.address"
				          :value="house.address">
				        </el-option>
				      </el-select>
			</el-form-item>
			<el-form-item label="住户身份" class="xz" style="width: 800px;">
				<el-select v-model="form2.sf" placeholder="请选择住户身份" style="width: 200px;right: 5px;">
					<el-option label="业主" value="业主"></el-option>
					<el-option label="家属" value="家属"></el-option>
				</el-select>
			</el-form-item>
		</form>
	</div>
	<div class="conmit">
		<el-button class="but1">取消</el-button>
		<el-button class="but2" @click="addHold">确定</el-button>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import $http from '../router/AxiosApi';
import { formMetaProps } from 'element-plus';
import {
		useRouter
	} from 'vue-router'
const router = useRouter()
	const form = reactive({
		householdPhone: '',
		householdName: '',
		birthday: '',
		identityLabel: '',
		bindingDetails:''
	})
	const form2=reactive({
		husId:'',
		sf:'',
		husName:''
	})
	const data = reactive({
		house: []
	})
	onMounted(() => {
		loadHouse()
	})
	const loadHouse = () => {
	  $http.post("selectHouse")
	    .then((res) => {
	        data.house = res.data;
	        console.log("id: " + data.house[0].houseId);
	    })
	    .catch((error) => {
	      console.error('加载房屋数据时出错:', error);
	    });
	}

	const addHold=()=>{
		form.bindingDetails=form2.husId+"/"+form2.sf
		console.log(form)
		$http.post("addHousehold",form).then((res)=>{
			console.log(res.data)
			router.push({
				name: 'HosingList'
			});
		})
	}
	
</script>

<style scoped>
	.top {
		text-align: left;
		border-radius: 10px;
		padding: 24px;
		background-color: #fff;
		margin-bottom: 10px;
		overflow: hidden;
	}

	.button {
		text-align: left;
		border-radius: 10px;
		padding: 24px;
		background-color: #fff;
		margin-bottom: 16px;
		overflow: hidden;
	}

	.conmit {
		border-radius: 10px;
		padding: 24px;
		background-color: #fff;
		margin-bottom: 16px;
		display: -webkit-box;
		display: flex;
		justify-content: flex-end;
	}

	.f_top {
		margin-left: 10px;
	}

	.f_button {
		width: 1000px;
	}

	.el-select__wrapper el-tooltip__trigger el-tooltip__trigger {
		height: 40px;
	}

	.el-input {
		height: 40px;

	}

	.el-form-item__label {
		width: 150px;
	}

	.but1 {
		width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0px 20px;
		color: #7e8081;
		background-color: #fafafa;
	}

	.but2 {
		width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0px 20px;
		color: #fff;
		background-color: #80e1b6;
		border-color: #80e1b6;
	}
</style>